<template>
    <layout-default
            name="author"
            :loaded="true">
        <div class="a-synopsis">
            <div class="s-wrap">
                <div class="w-avatar">
                    <img src="//cdn.kyeteo.cn/FpfQsM2ghNmiIJ89BHONjUZR80os" alt="">
                </div>
                <div class="w-name">
                    <span>kyeteo</span>
                </div>
                <div class="w-saying">
                    <span>擅长web全栈开发，喜欢动漫和旅游。</span>
                </div>
                <div class="w-third">
                    <div class="t-item" style="color:#07c160;">
                        <i class="iconfont icon-weixin"></i>
                    </div>
                    <div class="t-item">
                        <i class="iconfont icon-github"></i>
                    </div>
                    <div class="t-item" style="color:#FF8200;">
                        <i class="iconfont icon-weibo"></i>
                    </div>
                </div>
                <div class="w-statistic">
                    <div class="s-item">
                        <span>24</span>
                        <span>关注</span>
                    </div>
                    <div class="s-item">
                        <span>235</span>
                        <span>粉丝</span>
                    </div>
                    <div class="s-item">
                        <span>56</span>
                        <span>活跃度</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="a-do">
            <div class="d-tab border-1px-bottom">
                <div class="t-item">
                    <span>文章</span>
                </div>
                <div class="t-item">
                    <span>专题</span>
                </div>
                <div class="t-item">
                    <span>动态</span>
                </div>
            </div>
            <div class="d-list">
                <div class="l-item" @click="go('/article/76')">
                    <div class="i-author">
                        <div class="a-left">
                            <img src="//cdn.kyeteo.cn/FpfQsM2ghNmiIJ89BHONjUZR80os" alt="">
                            <span>kyeteo</span>
                        </div>
                        <div class="a-right">
                            <span>tensorflow</span>
                        </div>
                    </div>
                    <div class="i-content">
                        <div class="c-left">
                            <div class="l-title">
                                <span>《玩转Nginx》Nginx开启SSL</span>
                            </div>
                            <div class="l-desc">
                                <p>从2018年下半年开始,chrome开始将http网站标记为不安全，firefox等主流浏览器也陆续开始这么做了 免费SSL证书即为免费型的 DV SSL ...</p>
                            </div>
                        </div>
                        <div class="c-right" style="background-image: url(//cdn.kyeteo.cn/FjkONvQfmTChtuUqKX0aq7qDgEr8);"></div>
                    </div>
                    <div class="i-do">
                        <div class="d-item">
                            <i class="iconfont icon-dianzan"></i>
                            <span>25</span>
                        </div>
                        <div class="d-item">
                            <i class="iconfont icon-pinglun"></i>
                            <span>12</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </layout-default>
</template>

<style lang="less">
.author{
    .a-synopsis{
        padding: 20px 0;
        .s-wrap{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 50px 30px;
            background: white;
            .w-avatar{
                width:180px;
                height: 180px;
                border-radius: 90px;
                overflow: hidden;
                img{
                    width:100%;
                    height: 100%;
                }
            }
            .w-name{
                padding-top: 20px;
                span{
                    font-size: 36px;
                    font-weight: 500;
                }
            }
            .w-saying{
                padding-top: 20px;
                span{
                    white-space: nowrap;
                    color:#71777c;
                }
            }
            .w-third{
                display: flex;
                padding-top: 20px;
                .t-item{
                    i{
                        font-size: 50px;
                    }
                    &:not(:first-child){
                        margin-left: 20px;
                    }
                }
            }
            .w-statistic{
                display: flex;
                padding-top: 30px;
                .s-item{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    span{
                        &:last-child{
                            color:#71777c;
                        }
                    }
                    &:not(:first-child){
                        margin-left: 70px;
                    }
                }
            }
        }
    }
    .a-do{
        background: white;
        .d-tab{
            display: flex;
            padding: 0 30px;
            .t-item{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                flex:1;
            }
        }
        .d-list{
            padding: 50px 30px;
            .l-item {
                padding-bottom: 30px;
                background: white;

                .i-author {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 106px;
                    padding: 0 30px;

                    .a-left {
                        display: flex;
                        align-items: center;

                        img {
                            width: 44px;
                            height: 44px;
                            border-radius: 22px;
                        }

                        span {
                            padding-left: 10px;
                        }
                    }

                    .a-right {
                        span {
                            color: #71777c;
                        }
                    }
                }

                .i-content {
                    position: relative;
                    padding: 0 30px;
                    .c-left{
                        padding-right: 200px;
                        .l-title {
                            span {
                                font-size: 34px;
                                font-weight: 700;
                            }
                        }

                        .l-desc {
                            padding: 20px 0;
                            color: #71777c;
                        }
                    }
                    .c-right{
                        position: absolute;
                        top:50%;
                        right:30px;
                        transform: translateY(-50%);
                        width: 180px;
                        height: 180px;
                        background-size: auto 100%;
                    }
                }

                .i-do {
                    display: flex;
                    padding: 0 30px;

                    .d-item {
                        display: flex;
                        align-items: center;
                        color: #71777c;

                        i {
                            font-size: 40px;
                        }

                        span {
                            font-size: 28px;
                        }

                        &:not(:first-child) {
                            margin-left: 40px;
                        }
                    }
                }
                &:not(:first-child) {
                    margin-top: 20px;
                }
            }
        }
    }
}
</style>